<template>
    <div class="custom-rate">
        <span v-for="n in max" :key="n" class="star" :class="{ active: n <= currentValue, disabled }"
            @mouseenter="!disabled && setHover(n)" @mouseleave="!disabled && setHover(0)"
            @click="!disabled && setValue(n)">
            <img :src="n <= (hoverValue || currentValue) ? selectedStar : star" alt="star" />
        </span>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import selectedStar from '~/assets/icons/svg/selectedStar.svg'
import star from '~/assets/icons/svg/star.svg'

const props = defineProps({
    modelValue: { type: Number, default: 0 },
    max: { type: Number, default: 5 },
    disabled: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue'])

const currentValue = ref(props.modelValue)
const hoverValue = ref(0)

watch(() => props.modelValue, (val) => {
    currentValue.value = val
})

function setHover(val) {
    hoverValue.value = val
}
function setValue(val) {
    currentValue.value = val
    emit('update:modelValue', val)
}
</script>

<style scoped lang="less">
.custom-rate {
    display: flex;
    align-items: center;
}

.star {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.1s;
}

.star img {
    width: 100%;
    height: 100%;
}

.star.disabled {
    cursor: default;
    opacity: 0.5;
}

.star.active {
    transform: scale(1.1);
}
</style>
